<template>
  <div class="app-container calendar-list-container">
    <div v-if="!opShow">
      <search :list="queryList" :queryEntity="queryEntity"></search>
      <buttons :showQuery="true" :showBack="false" @query="doQuery" :list="btnList" :disabled="disabled" placeholder="" :permissions="permissions"></buttons>
      <grid :columns="columns" :multi="false" :url="queryUrl" ref="mainGrid" :height="'auto'" diffHeight="105" @change="rowCilck" :queryEntity="queryEntity" :pagination="true"
        :permissions="permissions" @changeOrder="doChange" @warehoseChange="doWarehoseChange" @quantityChange="doQuantityChange">
      </grid>
    </div>
    <el-dialog title="订单变更" :visible.sync="dialogVisible">
      <div>
        <el-form ref="entity" label-width="80px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="名称" prop="goodsName">
                <el-input v-model="entity.goodsName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物料名称" prop="materialName">
                <el-input v-model="entity.materialName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="序列号" prop="serialNumber">
                <el-input v-model="entity.serialNumber" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="当前订单" prop="orderNo">
                <el-input v-model="entity.orderNo" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="变更订单" prop="newOrderNo">
                <el-input v-model="entity.newOrderNo" :disabled="true">
                  <el-button slot="append" icon="el-icon-search" @click="openOrder"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数量" prop="quantity">
                <el-input v-model="entity.quantity" :disabled="false"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeData">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="仓库变更" :visible.sync="houseDialogVisible">
      <div>
        <el-form ref="entity" label-width="80px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="名称" prop="goodsName">
                <el-input v-model="entity.goodsName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物料名称" prop="materialName">
                <el-input v-model="entity.materialName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="序列号" prop="serialNumber">
                <el-input v-model="entity.serialNumber" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="当前仓库" prop="warehouseName">
                <el-input v-model="entity.warehouseName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="变更仓库" prop="warehouseCode">
                <el-select v-model="entity.warehouseCode" placeholder="请选仓库">
                  <el-option v-for="(type, index) in warehouseList" :label="type.warehouseName" :value="type.warehouseCode" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数量" prop="quantity">
                <el-input v-model="entity.quantity" :readonly="false"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="houseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="houseChangeData">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="数量变更" :visible.sync="quantityDialogVisible">
      <div>
        <el-form ref="entity" label-width="80px" size="small">
          <el-row>
            <el-col :span="8">
              <el-form-item label="名称" prop="goodsName">
                <el-input v-model="entity.goodsName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="物料名称" prop="materialName">
                <el-input v-model="entity.materialName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="序列号" prop="serialNumber">
                <el-input v-model="entity.serialNumber" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="当前订单" prop="orderNo">
                <el-input v-model="entity.orderNo" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="当前仓库" prop="warehouseName">
                <el-input v-model="entity.warehouseName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数量" prop="quantity">
                <el-input v-model="entity.quantity" :readonly="false"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quantityDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="quantityChangeData">确 定</el-button>
      </span>
    </el-dialog>

    <GridDialog ref="orderGridDialog" :multi="false" :url="orderUrl" :columns="orderColumns" @select="selectOrderData" :permissions="permissions" :queryEntity="orderQueryEntity"
      :queryList="orderQueryList">
    </GridDialog>
  </div>
</template>

<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import grid from '@/components/Grid'
import buttons from '@/components/Buttons'
import { Message, MessageBox } from 'element-ui'
import { mapGetters } from 'vuex'
import { YesOrNoFormatter } from '@/const/dict'
import search from '@/components/Search'
import { colunms } from '@/const/colunms'
import { dict } from '@/const/dict'
import { queryField } from '@/const/query'
import GridDialog from '@/components/GridDialog'


export default {
  components: { grid, buttons, search, GridDialog },
  data () {
    return {
      orderQueryEntity: {},
      warehouseList: [],
      queryUrl: url.WMS_STOCK_DETAIL_LIST_URL,
      orderQueryList: queryField().order,
      orderUrl: url.ORDER_LIST_URL,
      disabled: true,
      opShow: false,
      queryEntity: { allData: true },
      dialogVisible: false,
      houseDialogVisible: false,
      quantityDialogVisible: false,
      entity: { code: '', newOrderNo: '', quantity: 0 },
      orderColumns: colunms().orderColumns,
      columns: [
        {
          label: '操作', width: 220, prop: 'op', align: 'center', template: 'op', opList: [
            { name: '数量变更', clickName: 'quantityChange', auth: 'quantity_change', confirm: true },
            { name: '订单变更', clickName: 'changeOrder', auth: 'detail_change', confirm: true },
            { name: '仓库变更', clickName: 'warehoseChange', auth: 'detail_change', confirm: true }
          ]
        },
        { label: '仓库名称', width: 120, prop: 'warehouseName', align: 'left' },
        { label: '物料名称', width: 360, prop: 'materialName', align: 'center' },
        { label: this.global.modelName, width: 80, prop: 'goodsName', align: 'center' },
        { label: this.global.modelProp, width: 100, prop: 'modelProp', align: 'center' },
        { label: '克重', width: 80, prop: 'weight', align: 'center' },
        { label: '单位', width: 80, prop: 'unit', align: 'center' },
        { label: '物料类型', width: 100, prop: 'materialTypeName', align: 'center' },
        { label: '大货订单', width: 180, prop: 'businessOrderNo', align: 'center' },
        { label: '序列号', width: 120, prop: 'serialNumber', align: 'center' },
        { label: '批次号', width: 160, prop: 'batchNo', align: 'center' },
        { label: '卷数', width: 80, prop: 'total', align: 'center' },
        { label: '数量', width: 100, prop: 'quantity', align: 'center' },
        { label: '操作人', width: 100, prop: 'createUserName', align: 'center' },
        { label: '操作时间', width: 140, prop: 'createTime', align: 'center' }
      ],
      btnList: [
        // { name: '订单变更', type: 'primary', icon: 'edit', click: 'change', auth: 'detail_change', ctr: true, confirm: true },
        //{ name: '仓库变更', type: 'primary', icon: 'edit', click: 'warehoseChange', auth: 'detail_change', ctr: true, confirm: true }
      ],
      queryList: [
        { name: this.global.modelName, type: 'query', prop: 'goodsCode', rowValue: 'modelCode', rowName: 'modelName', placeholder: this.global.modelName, url: url.MODEL_LIST_URL, columns: colunms().modelColumns, pagination: true, queryList: queryField().model },
        { name: '仓库名称', type: 'query', prop: 'warehouseCode', rowValue: 'warehouseCode', rowName: 'warehouseName', placeholder: "仓库名称", url: url.WAREHOUSE_USABLE_URL, columns: colunms().warehouseColumns },
        { name: '订单编号', type: 'query', prop: 'businessOrderNo', rowValue: 'orderNo', rowName: 'orderNo', url: url.ORDER_LIST_URL, columns: colunms().orderColumns, pagination: true, queryList: queryField().order, queryEntity: { status: 1 }, autoInput: true }
      ]
    }
  },
  created () {
    this.queryEntity.warehouseCode = this.$route.query.warehouseCode
    this.queryEntity.goodsCode = this.$route.query.goodsCode

  },
  computed: {
    ...mapGetters([
      'permissions'
    ])
  },
  methods: {
    doQuery (text) {
      this.$refs['mainGrid'].doQuery(text)
    },
    rowCilck (row) {
      this.disabled = row.length == 0
    },
    doChange (row) {
      if (row) {
        this.dialogVisible = true
        this.entity.materialName = row.materialName
        this.entity.goodsName = row.goodsName
        this.entity.code = row.stockCode
        this.entity.serialNumber = row.serialNumber
        this.entity.orderNo = row.businessOrderNo
        this.entity.newOrderNo = ''
        this.entity.quantity = row.quantity
      }
    },
    doWarehoseChange (row) {
      this.initWarehouse()
      if (row) {
        this.houseDialogVisible = true
        this.entity.materialName = row.materialName
        this.entity.goodsName = row.goodsName
        this.entity.code = row.stockCode
        this.entity.serialNumber = row.serialNumber
        this.entity.warehouseName = row.warehouseName
        this.entity.quantity = row.quantity
      }
    },
    doQuantityChange (row) {
      this.initWarehouse()
      if (row) {
        this.quantityDialogVisible = true
        this.entity.materialName = row.materialName
        this.entity.goodsName = row.goodsName
        this.entity.code = row.stockCode
        this.entity.serialNumber = row.serialNumber
        this.entity.warehouseName = row.warehouseName
        this.entity.orderNo = row.businessOrderNo
        this.entity.quantity = row.quantity
      }
    },
    openOrder () {
      this.$refs['orderGridDialog'].show()
    },
    selectOrderData (row) {
      this.entity.newOrderNo = row.orderNo
    },
    quantityChangeData () {
      this.quantityChangeUrl(this.entity).then(data => {
        if (data) {
          this.quantityDialogVisible = false
          this.$refs['mainGrid'].reload()
        }
      })
    },
    houseChangeData () {
      this.houseChangeUrl(this.entity).then(data => {
        if (data) {
          this.houseDialogVisible = false
          this.$refs['mainGrid'].reload()
        }
      })
    },
    changeData () {
      this.changeUrl(this.entity).then(data => {
        if (data) {
          this.dialogVisible = false
          this.$refs['mainGrid'].reload()
        }
      })
    },
    initWarehouse () {
      this.warehouseUrl().then(data => {
        if (data) {
          this.warehouseList = data
        }
      })
    },
    warehouseUrl () {
      return request({
        url: url.WAREHOUSE_USABLE_URL,
        method: 'post',
        data: { key: 'key' }
      })
    },
    houseChangeUrl (data) {
      return request({
        url: url.WMS_STOCK_HOUSE_CHANGE_URL,
        method: 'post',
        data: data
      })
    },
    quantityChangeUrl (data) {
      return request({
        url: url.WMS_STOCK_QUANRIRY_CHANGE_URL,
        method: 'post',
        data: data
      })
    },
    changeUrl (data) {
      return request({
        url: url.WMS_STOCK_DETAIL_CHANGE_URL,
        method: 'post',
        data: data
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
